<template>
    <basic-container>
        <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
          <el-container>
            <el-container>
              <el-aside width="150px">
                <el-button type="primary" @click="handlePrint">打印</el-button>
              </el-aside>
              <el-container>
                <el-main style="background: #fff!important">
                  <div v-for="arr in logList" style="width:120px;margin-left: 10px;min-height: 20px;font-size: 12px;float: left;">
                    <span>{{arr.operator}}</span>
                    <br/>
                    <span style="width:100px">{{arr.time}}</span>
                  </div>
                </el-main>
              </el-container>
            </el-container>
          </el-container>
        </div>
      <template>
        <div id="printDetail">
          <br/>
          <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5">
            <div class="block">
              产品工艺名称： {{productProcessName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              产品类型： {{productLineType}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              品号：{{articleNumber}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              流程图号：{{flowChartNo}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
              工艺模板：{{craftLineName}}
            </div>
          </div>
          <br/>
          <el-container>
            <el-main class="demo">
                <avue-flow :height="800"
                                  width="100%"
                                  ref="flow"
                                  :option="option"
                                  v-model="flowForm">
                <template #header="{node}" >
                  {{(node || {}).name}}
                </template>
                <template slot-scope="{node}">
                  <el-collapse :ref="node.id+`Ref`"  v-model="formCollapse" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                    <el-collapse-item title="工序属性" :name="node.id">
                      <el-descriptions  class="margin-top"  :labelStyle="{'width': '42px'}" :column="1" size="small" border >
                        <el-descriptions-item v-if="form[node.id+`show`]" label="物料">
<!--                          <avue-select   v-model="form[node.id+`_material`]" filterable clearable disabled dialogWidth="100%"  multiple placeholder="请选择物料"  :props="{label: 'materialName',value: 'id'}"  :dic="materialDataList" ></avue-select>-->
                          <el-select v-model="form[node.id+`_material`]"  :ref="node.id+`materialRef`" placeholder="请选择物料"  :popper-append-to-body="false" filterable clearable  disabled dialogWidth="100%"  multiple  >
                            <el-option
                              v-for="item in materialDataList"
                              @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)"
                              style="width: 600px"
                              :label="item.label"
                              :value="item.label">
                            </el-option>
                          </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item v-if="form[node.id+`show`]" label="辅料">
                          <!--<avue-select   v-model="form[node.id+`_auxiliaryMaterial`]" filterable clearable  disabled dialogWidth="100%"  multiple placeholder="请选择辅料"  :props="{label: 'materialName',value: 'id'}"  :dic="auxiliaryMaterialList" ></avue-select>-->
                          <el-select v-model="form[node.id+`_auxiliaryMaterial`]" :ref="node.id+`auxiliaryMaterialRef`" placeholder="请选择辅料"  :popper-append-to-body="false" filterable clearable disabled dialogWidth="100%"  multiple  >
                            <el-option
                              v-for="item in auxiliaryMaterialList"
                              @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)"
                              style="width: 600px"
                              :label="item.label"
                              :value="item.label">
                            </el-option>
                          </el-select>

                        </el-descriptions-item>
                       <!-- <el-descriptions-item label="设备分类">
                          <avue-select   v-model="form[node.id+`_deviceClass`]" filterable clearable  disabled dialogWidth="100%"  multiple placeholder="请选择设备分类"  :props="{label: 'label',value: 'value'}"  :dic="deviceClassList" ></avue-select>
                        </el-descriptions-item>-->
                        <el-descriptions-item v-if="form[node.id+`show`]" label="作业指导书">
                          <div  style="float: left;">
                            <a target="_blank" :href="form[node.id+`_workingBookFileListPDF`]">{{form[node.id+`_workingBookFileListPDFName`]}}</a>
                          </div>
                        </el-descriptions-item>
                        <el-descriptions-item v-if="form[node.id+`show`]" label="自定义属性">
                          <div  v-for="item in customList[node.id]" :key="item.id">
                            {{item.parameterName}}：<el-input v-model="form[node.id+`_`+item.id]" disabled size="mini"style="width: 50px" ></el-input> {{item.unit}}
                            <br/>
                          </div>
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-collapse-item>
                  </el-collapse>
                </template>
              </avue-flow>
            </el-main>
          </el-container>
        </div>
      </template>

    </basic-container>
</template>

<script>
    import {getDeviceClassList} from '@/api/hengdong/pfocinterface' //获取设备相关
    import {getPfocProcessList } from '@/api/pfoc/pfocprocess'  //获取工序
    import {getCraftProductList } from '@/api/pfoc/craftproduct' //获取工艺模板
    import {getCraftProductLineDetailsList,} from '@/api/pfoc/craftproductline'
    import { getItemCodeList } from '@/api/workorder/workordercps'  //获取品号集合
    // import { getMaterialAccessoryLibraryList } from '@/api/pfoc/materialaccessorylibrary'  //获取0:物料;1:辅料;
    import {groupItemCodeAndItemSpecification} from "@/api/workorder/workorderbom"; //获取工单物料

    import {updateCraftProdictLine,delCraftProdictLine} from '@/api/pfoc/craftproductline'
    import {uploadSubmit,deletWorkBook,getCraftProductLineDetails} from '@/api/pfoc/craftproductlinedetails'
    import { getLogList} from '@/api/pfoc/productlinelog'
    import {tableOption} from '@/const/crud/pfoc/craftproductlinedetails'

    export default {
        name: "craft",
        props:{
            productProcessId:{
                type:String
            },
            productLineTypeList:{//产线类型集合
                type:Array
            }
        },
        data() {
            return {
                formCollapse: [],
                count: 0,
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                flowForm:'',
                pfocProcessList:[],//工序集合
                processAttributeList:[],//工序通用属性集合
                processAttributeDataList:[],//工序通用属性数据集合
                deviceClassList:[],//设备分类集合
                articleNumber:null,//品号
                craftLineName:null,//工艺模板名称
                craftLineMainData:{},//工艺产线主变数据
                craftLineSubData:[],//工艺产线子表数据
                craftLinedetailsDelIds:[],//存储需要删除的节点工序ID（即已有工序删除ID）
                tableLoading: false,
                tableOption: tableOption,
                option: {
                    name: null,
                    nodeList: [],//工序节点集合
                    lineList: [],//工序各节点指向顺序集合
                },
                fileData: new FormData(),
                loading:false,
                logList:[],//操作日志集合
                productLineType:null,//产品类型
                flowChartNo:null,//流程图号
                articleNumbeList:[],//品号集合
                materialDataList:[],//物料集合
                auxiliaryMaterialList:[],//辅料集合
                craftId:null,//工艺模板ID
                productProcessName:null,//产品工艺名称
                workList:[],//作业指导书集合
                craftProductList:[],//工艺模板集合
                customList:[],//自定义属性集合
                zIndexStyle:"",
            };
        },
        watch: {
          formCollapse(newVal, oldVal) {
            const len = newVal.length
            if (len > 3) {
              newVal.length = 3
              //修改提示
              this.$message.warning("一次最多打开三个。")
              return
            }
            oldVal.map(item => {
              this.form[item + 'show'] = false
            })
            newVal.map(item => {
              this.form[item + 'show'] = true
            })
          }
        },
        created() {
          //获取品号集合
          this.getItemCodeListData();
          //获取工单物料
          this.getWorkOrderMaterialListData();
          //获取工艺模板集合
          this.getCraftProductListData();
          //获取当前产线日志
          this.getLogListData();
        },
        computed: {
            nodeList () {
                return this.option.nodeList
            }

        },
        mounted() {
        },
        methods: {
            getCraftProductLineDetails(){
                if(!this.validatenull(this.productProcessId)) {
                    this.tableLoading = true
                    getCraftProductLineDetailsList(this.productProcessId).then(response => {
                        this.formCollapse = []
                        this.$refs.flow.resetPlumb();
                        var data =response.data.data;
                        //获取工艺产线主表数据
                        this.craftLineMainData= data.craftProductLine;//工艺产线主变数据

                        //获取工艺产线子表数据
                        this.craftLineSubData = data.craftProductLineDetailsList;//工艺产线子表数据
                        this.articleNumber=this.craftLineMainData.articleNumber;//品号
                        this.productLineType=this.craftLineMainData.productLineType;//产品类型
                        this.flowChartNo=this.craftLineMainData.flowChartNo;//流程图号
                        this.productProcessName=this.craftLineMainData.productProcessName;//产品工艺名称
                        this.standardWorkHours = this.craftLineMainData.standardWorkHours;//标准工时
                        this.craftId=this.craftLineMainData.craftId;//工艺模板ID
                        for (let i = 0; i < this.craftProductList.length; i++) {
                            if( this.craftProductList[i].id==this.craftId){
                                this.craftLineName= this.craftProductList[i].craftLineName;//工艺模板名称
                            }
                        }

                        //设置反显工序
                        this.option.nodeList = JSON.parse(this.craftLineMainData.processNodes);
                        //设置反显工序指向顺序
                        this.option.lineList =  JSON.parse(this.craftLineMainData.processNodeLine);
                        //工序自定义参数集合
                        this.customList = this.craftLineMainData.map;
                        //初始化节点下标
                        var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
                        this.nodeCount = parseInt(n.split("node")[1])+1;
                        //注册动态节点变量
                        this.reverseDisplay();//反显方法
                        //重新初始化flow组件
                        this.$refs.flow.init();
                        console.log(this.form)
                        console.log(this.option.nodeList)
                        console.log(this.option.lineList)
                        this.$refs.flow.cleanupDarg();
                        this.tableLoading = false
                    }).catch(() => {
                        this.tableLoading = false
                    })
                }
            },
            /**注册各节点动态变量并设置反显*/
            reverseDisplay(){
              //注册动态节点变量
              for(var n=0;n<this.craftLineSubData.length;n++) {
                var  nodeId = this.craftLineSubData[n].nodeId;

                this.$set(this.form, nodeId+ "_processId", this.craftLineSubData[n].processId);//注册动态节点-当前工序ID
                /*    if(this.validatenull(this.craftLineSubData[n].deviceClass)){
                        this.$set(this.form, nodeId+ "_deviceClass", this.craftLineSubData[n].deviceClass);//注册动态节点-设备类型
                    }else {
                        this.$set(this.form, nodeId + "_deviceClass", this.craftLineSubData[n].deviceClass.split(","));//注册动态节点-设备类型
                    }*/
                if(this.validatenull(this.craftLineSubData[n].material)){
                  this.$set(this.form, nodeId+ "_material", this.craftLineSubData[n].material);//注册动态节点-物料
                }else {
                  for(var j=0;j< this.craftLineSubData[n].materialRatio.split(",").length;j++){
                    var index = this.materialDataList.findIndex(item => item.label === this.craftLineSubData[n].material.split("#@")[j]);
                    var radio =this.craftLineSubData[n].materialRatio.split(",")[j];
                    if(radio ==="undefined"){
                      this.$set(this.form, nodeId + "_material"+(index+1)+"_ratio", undefined);//注册动态节点-物料比例
                    }else{
                      this.$set(this.form, nodeId + "_material"+(index+1)+"_ratio", radio);//注册动态节点-物料比例
                    }                  }
                  this.$set(this.form, nodeId + "_material", this.craftLineSubData[n].material.split("#@"));//注册动态节点-物料
                }
                if(this.validatenull(this.craftLineSubData[n].auxiliaryMaterial)){
                  this.$set(this.form, nodeId+ "_auxiliaryMaterial", this.craftLineSubData[n].auxiliaryMaterial);//注册动态节点-辅料
                }else {
                  for(var j=0;j<  this.craftLineSubData[n].auxiliaryMaterialRatio.split(",").length;j++){
                    var index = this.auxiliaryMaterialList.findIndex(item => item.label === this.craftLineSubData[n].auxiliaryMaterial.split("#@")[j]);
                    var radio =this.craftLineSubData[n].auxiliaryMaterialRatio.split(",")[j];
                    if(radio ==="undefined"){
                      this.$set(this.form, nodeId + "_auxiliaryMaterial"+(index+1)+"_ratio", undefined);//注册动态节点-物料比例
                    }else{
                      this.$set(this.form, nodeId + "_auxiliaryMaterial"+(index+1)+"_ratio", radio);//注册动态节点-物料比例
                    }
                  }
                  this.$set(this.form, nodeId + "_auxiliaryMaterial", this.craftLineSubData[n].auxiliaryMaterial.split("#@"));//注册动态节点-辅料
                }

                let obj = new Object();
                //注册动态节点-各工序作业指导书默认URL
                if(this.validatenull(this.craftLineSubData[n].workingBook)){
                  this.$set(this.form, nodeId+ "_workingBookFileListPDF",  "#");
                }else {
                  this.$set(this.form, nodeId + "_workingBookFileListPDF", this.craftLineSubData[n].workingBook);
                  obj.url =this.craftLineSubData[n].workingBook;
                }
                //注册动态节点-各工序作业指导书默认名称
                if(this.validatenull(this.craftLineSubData[n].workingBookName)){
                  this.$set(this.form, nodeId+ "_workingBookFileListPDFName",  null);
                }else {
                  this.$set(this.form, nodeId + "_workingBookFileListPDFName", this.craftLineSubData[n].workingBookName);
                  obj.name = this.craftLineSubData[n].workingBookName;
                }
                //获取自定义属性数据集合
                var customArr = JSON.parse(this.craftLineSubData[n].customAttribute);
                //自定义属性
                for(var j = 0; j <this.customList[nodeId].length;j++){
                  for (var m = 0; m<customArr.length; m++){
                    if(nodeId+"_"+this.customList[nodeId][j].id == customArr[m].model){
                      this.$set(this.form,nodeId+"_"+this.customList[nodeId][j].id, customArr[m].value);
                    }
                  }
                }

              }
            },
            /**获取品号*/
            getItemCodeListData(){
              getItemCodeList().then(response => {
                    this.articleNumbeList=response.data.data;
                })
            },
            /**获取工序*/
            getPfocProcessListData(){
                getPfocProcessList().then(response => {
                    this.pfocProcessList=response.data.data;
                    // console.log(this.pfocProcessList)
                })

            },
            /**获取工艺模板集合*/
            getCraftProductListData(){
                getCraftProductList().then(response => {
                    this.craftProductList=response.data.data;
                    for (let i = 0; i < this.craftProductList.length; i++) {
                        if( this.craftProductList[i].id==this.craftId){
                            this.craftLineName= this.craftProductList[i].craftLineName;//工艺模板名称
                        }
                    }
                })

            },
            /**获取工单物料*/
            getWorkOrderMaterialListData(){
              groupItemCodeAndItemSpecification().then(response => {
                var list = response.data.data;
                list.forEach((item, index) => {
                  item.id = index + 1; // 假设ID从1开始
                  item.label = "【"+item.itemCode+"】" + "【"+item.itemName+"】" + "【"+item.itemSpecification+"】";
                });
                this.materialDataList=list;//物料集合
                this.auxiliaryMaterialList=list;//辅料集合
                //注册动态节点变量
                this.reverseDisplay();//反显方法
              })
            },

            refreshChange(){
                getCraftProductLineDetails(this.productProcessId).then(response => {
                    //获取工艺产线子表数据
                    this.craftLineSubData = response.data.data;//工艺产线子表数据
                })
            },

            //打印
            handlePrint () {
                this.$Print('#printDetail');
            },
            //获取产品工艺日志
            getLogListData(){
                getLogList(this.productProcessId).then(response => {
                    this.logList=response.data.data;
                })
            },
            //鼠标移到置顶
            handleMouseEnter(nodeId) {
                //属性鼠标移到展开
                // this.$set(this.showActive, nodeId, ['1']);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
                this.zIndexStyle="1";

            },
            //鼠标移开取消置顶
            handleMouseLeave(nodeId) {
                //属性鼠标移开关闭
                // this.$set(this.showActive, nodeId, []);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="2";
                this.zIndexStyle="";

            },

        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }
/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#efefef !important;
  }
/deep/.el-card__body{
  padding: 0px!important;
}
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }

</style>
